

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/maple_leaf.png">
  <link rel="icon" href="/blog/img/maple_leaf.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="枫🍁川">
  <meta name="keywords" content="">
  
    <meta name="description" content="网页布局（layout）是 CSS 的一个重点应用。  布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。  2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能">
<meta property="og:type" content="article">
<meta property="og:title" content="flex布局教程">
<meta property="og:url" content="https://destiny-yyc.github.io/flex-layout.html">
<meta property="og:site_name" content="枫🍁川的博客">
<meta property="og:description" content="网页布局（layout）是 CSS 的一个重点应用。  布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。  2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071006.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071013.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg">
<meta property="og:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png">
<meta property="article:published_time" content="2022-02-19T16:00:00.000Z">
<meta property="article:modified_time" content="2023-03-14T07:08:23.028Z">
<meta property="article:author" content="枫🍁川">
<meta property="article:tag" content="flex">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>flex布局教程 - 枫🍁川的博客</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"destiny-yyc.github.io","root":"/blog/","version":"1.9.2","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/blog/">
      <strong>枫🍁川的博客</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="flex布局教程"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        枫🍁川
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-02-20 00:00" pubdate>
          2022年2月20日
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          3.8k 字
        
      </span>
    

    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">flex布局教程</h1>
            
            
              <div class="markdown-body">
                
                <p>网页布局（layout）是 CSS 的一个重点应用。</p>
<p><a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif"><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif" srcset="/blog/img/loading.gif" lazyload alt="img"></a></p>
<p>布局的传统解决方案，基于<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">盒状模型</a>，依赖 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> 属性 + <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/position"><code>position</code></a>属性 + <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/float"><code>float</code></a>属性。它对于那些特殊布局非常不方便，比如，<a target="_blank" rel="noopener" href="https://css-tricks.com/centering-css-complete-guide/">垂直居中</a>就不容易实现。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>Flex 布局将成为未来布局的首选方案。本文介绍它的语法，<a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blog/2015/07/flex-examples.html">下一篇文章</a>给出常见布局的 Flex 写法。网友 <a target="_blank" rel="noopener" href="http://vgee.cn/">JailBreak</a> 为本文的所有示例制作了 <a target="_blank" rel="noopener" href="http://static.vgee.cn/static/index.html">Demo</a>，也可以参考。</p>
<p>以下内容主要参考了下面两篇文章：<a target="_blank" rel="noopener" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a> 和 <a target="_blank" rel="noopener" href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">A Visual Guide to CSS3 Flexbox Properties</a>。</p>
<h2 id="一、Flex-布局是什么？"><a href="#一、Flex-布局是什么？" class="headerlink" title="一、Flex 布局是什么？"></a>一、Flex 布局是什么？</h2><p>Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p>
<p>任何一个容器都可以指定为 Flex 布局。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;
	<span class="hljs-attribute">display</span>: flex;
&#125;</code></pre></div>

<p>行内元素也可以使用 Flex 布局。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;
	<span class="hljs-attribute">display</span>: inline-flex;
&#125;</code></pre></div>

<p>Webkit 内核的浏览器，必须加上<code>-webkit</code>前缀。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;
 <span class="hljs-attribute">display</span>: -webkit-flex; <span class="hljs-comment">/* Safari */</span>
 <span class="hljs-attribute">display</span>: flex;
&#125;</code></pre></div>

<p>注意，设为 Flex 布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</p>
<h2 id="二、基本概念"><a href="#二、基本概念" class="headerlink" title="二、基本概念"></a>二、基本概念</h2><p>采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</p>
<p>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p>
<h2 id="三、容器的属性"><a href="#三、容器的属性" class="headerlink" title="三、容器的属性"></a>三、容器的属性</h2><p>以下6个属性设置在容器上。</p>
<blockquote>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-content</li>
</ul>
</blockquote>
<h3 id="3-1-flex-direction属性"><a href="#3-1-flex-direction属性" class="headerlink" title="3.1 flex-direction属性"></a>3.1 flex-direction属性</h3><p><code>flex-direction</code>属性决定主轴的方向（即项目的排列方向）。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;
	<span class="hljs-attribute">flex-direction</span>: row | row-reverse | column | column-reverse;
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>它可能有4个值。</p>
<blockquote>
<ul>
<li><code>row</code>（默认值）：主轴为水平方向，起点在左端。</li>
<li><code>row-reverse</code>：主轴为水平方向，起点在右端。</li>
<li><code>column</code>：主轴为垂直方向，起点在上沿。</li>
<li><code>column-reverse</code>：主轴为垂直方向，起点在下沿。</li>
</ul>
</blockquote>
<h3 id="3-2-flex-wrap属性"><a href="#3-2-flex-wrap属性" class="headerlink" title="3.2 flex-wrap属性"></a>3.2 flex-wrap属性</h3><p>默认情况下，项目都排在一条线（又称”轴线”）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071006.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;
	<span class="hljs-attribute">flex-wrap</span>: nowrap | wrap | wrap-reverse;
&#125;</code></pre></div>

<p>它可能取三个值。</p>
<p>（1）<code>nowrap</code>（默认）：不换行。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>（2）<code>wrap</code>：换行，第一行在上方。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>（3）<code>wrap-reverse</code>：换行，第一行在下方。</p>
<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<h3 id="3-3-flex-flow"><a href="#3-3-flex-flow" class="headerlink" title="3.3 flex-flow"></a>3.3 flex-flow</h3><p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code>。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;
	<span class="hljs-attribute">flex-flow</span>: &lt;flex-direction&gt; || &lt;flex-wrap&gt;;
&#125;</code></pre></div>

<h3 id="3-4-justify-content属性"><a href="#3-4-justify-content属性" class="headerlink" title="3.4 justify-content属性"></a>3.4 justify-content属性</h3><p><code>justify-content</code>属性定义了项目在主轴上的对齐方式。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;
	<span class="hljs-attribute">justify-content</span>: flex-start | flex-end | center | space-between | space-around;
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>
<blockquote>
<ul>
<li><code>flex-start</code>（默认值）：左对齐</li>
<li><code>flex-end</code>：右对齐</li>
<li><code>center</code>： 居中</li>
<li><code>space-between</code>：两端对齐，项目之间的间隔都相等。</li>
<li><code>space-around</code>：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>
</ul>
</blockquote>
<h3 id="3-5-align-items属性"><a href="#3-5-align-items属性" class="headerlink" title="3.5 align-items属性"></a>3.5 align-items属性</h3><p><code>align-items</code>属性定义项目在交叉轴上如何对齐。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;
	<span class="hljs-attribute">align-items</span>: flex-start | flex-end | center | baseline | stretch;
&#125;</code></pre></div>

<p><a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png"><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png" srcset="/blog/img/loading.gif" lazyload alt="img"></a></p>
<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>
<blockquote>
<ul>
<li><code>flex-start</code>：交叉轴的起点对齐。</li>
<li><code>flex-end</code>：交叉轴的终点对齐。</li>
<li><code>center</code>：交叉轴的中点对齐。</li>
<li><code>baseline</code>: 项目的第一行文字的基线对齐。</li>
<li><code>stretch</code>（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
</ul>
</blockquote>
<h3 id="3-6-align-content属性"><a href="#3-6-align-content属性" class="headerlink" title="3.6 align-content属性"></a>3.6 align-content属性</h3><p><code>align-content</code>属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;
	<span class="hljs-attribute">align-content</span>: flex-start | flex-end | center | space-between | space-around | stretch;
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>该属性可能取6个值。</p>
<blockquote>
<ul>
<li><code>flex-start</code>：与交叉轴的起点对齐。</li>
<li><code>flex-end</code>：与交叉轴的终点对齐。</li>
<li><code>center</code>：与交叉轴的中点对齐。</li>
<li><code>space-between</code>：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
<li><code>space-around</code>：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
<li><code>stretch</code>（默认值）：轴线占满整个交叉轴。</li>
</ul>
</blockquote>
<h2 id="四、项目的属性"><a href="#四、项目的属性" class="headerlink" title="四、项目的属性"></a>四、项目的属性</h2><p>以下6个属性设置在项目上。</p>
<blockquote>
<ul>
<li><code>order</code></li>
<li><code>flex-grow</code></li>
<li><code>flex-shrink</code></li>
<li><code>flex-basis</code></li>
<li><code>flex</code></li>
<li><code>align-self</code></li>
</ul>
</blockquote>
<h3 id="4-1-order属性"><a href="#4-1-order属性" class="headerlink" title="4.1 order属性"></a>4.1 order属性</h3><p><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">order</span>: &lt;integer&gt;;
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071013.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<h3 id="4-2-flex-grow属性"><a href="#4-2-flex-grow属性" class="headerlink" title="4.2 flex-grow属性"></a>4.2 flex-grow属性</h3><p><code>flex-grow</code>属性定义项目的放大比例，默认为<code>0</code>，即如果存在剩余空间，也不放大。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">flex-grow</span>: &lt;number&gt;; <span class="hljs-comment">/* default 0 */</span>
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>如果所有项目的<code>flex-grow</code>属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的<code>flex-grow</code>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
<h3 id="4-3-flex-shrink属性"><a href="#4-3-flex-shrink属性" class="headerlink" title="4.3 flex-shrink属性"></a>4.3 flex-shrink属性</h3><p><code>flex-shrink</code>属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">flex-shrink</span>: &lt;number&gt;; <span class="hljs-comment">/* default 1 */</span>
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>如果所有项目的<code>flex-shrink</code>属性都为1，当空间不足时，都将等比例缩小。如果一个项目的<code>flex-shrink</code>属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
<p>负值对该属性无效。</p>
<h3 id="4-4-flex-basis属性"><a href="#4-4-flex-basis属性" class="headerlink" title="4.4 flex-basis属性"></a>4.4 flex-basis属性</h3><p><code>flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为<code>auto</code>，即项目的本来大小。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">flex-basis</span>: &lt;length&gt; | auto; <span class="hljs-comment">/* default auto */</span>
&#125;</code></pre></div>

<p>它可以设为跟<code>width</code>或<code>height</code>属性一样的值（比如350px），则项目将占据固定空间。</p>
<h3 id="4-5-flex属性"><a href="#4-5-flex属性" class="headerlink" title="4.5 flex属性"></a>4.5 flex属性</h3><p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">flex</span>: none | [ &lt;<span class="hljs-string">&#x27;flex-grow&#x27;</span>&gt; &lt;<span class="hljs-string">&#x27;flex-shrink&#x27;</span>&gt;? || &lt;<span class="hljs-string">&#x27;flex-basis&#x27;</span>&gt; ]
&#125;</code></pre></div>

<p>该属性有两个快捷值：<code>auto</code> (<code>1 1 auto</code>) 和 none (<code>0 0 auto</code>)。</p>
<p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
<h3 id="4-6-align-self属性"><a href="#4-6-align-self属性" class="headerlink" title="4.6 align-self属性"></a>4.6 align-self属性</h3><p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为<code>auto</code>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>。</p>
<div class="code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;
	<span class="hljs-attribute">align-self</span>: auto | flex-start | flex-end | center | baseline | stretch;
&#125;</code></pre></div>

<p><img src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</p>
<p>原文：阮一峰的博客 <a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a></p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/blog/categories/javascript/" class="category-chain-item">javascript</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/blog/tags/flex/">#flex</a>
      
    </div>
  
</div>


              

              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/front-end.html" title="前端掌握知识程度">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">前端掌握知识程度</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/second-axios.html" title="二次封装 Axios (javascript)">
                        <span class="hidden-mobile">二次封装 Axios (javascript)</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <span>枫🍁川</span> <i class="iconfont icon-love"></i> <span>前端小白</span> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>
<script type="text/javascript" src="/blog/js/click-love.js"></script>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      collapseDepth   : CONFIG.toc.collapseDepth || 0,
      scrollSmooth    : true,
      headingsOffset  : -boardTop
    });
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/blog/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
<script src="/blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/blog/live2dw/assets/chitose.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
</html>
